﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单复古js选项卡切换代码 - 站长素材</title>

<script src="js/layer.js"></script>
<script type="text/javascript">
    // JavaScript Document
    window.onload = function () {
        var oTab = document.getElementById("cen_right_top");
        var aH3 = oTab.getElementsByTagName("h3");
        var aDiv = oTab.getElementsByTagName("span");
        for (var i = 0; i < aH3.length; i++) {
            aH3[i].index = i;
            aH3[i].onclick = function () {
                for (var i = 0; i < aH3.length; i++) {
                    aH3[i].className = "";
                    aDiv[i].style.display = "none";
                }
                this.className = "active";
                aDiv[this.index].style.display = "block";
            }
        }
    }

    function lh() {

        layer.open({
            content: '你是想确认呢，还是想取消呢？',
            btn: ['确认', '取消'],
            shadeClose: false,
            yes: function() {
                layer.open({ content: '你点了确认', time: 1 });
            }, no: function() {
                layer.open({ content: '你选择了取消', time: 1 });
            }
        });
    }
    
</script>

</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

#cen_right_top{width:720px;margin:40px auto 0 auto;}
#cen_right_top div .active{background:#CCC;color:#F3F3F3;}
#cen_right_top div h3{line-height:35px;text-align:center;float:left;height:35px;width:182px;margin::0px;padding:0px;background-color:#F3F3F3;font-size:14px;color:#333333;font-weight:lighter;cursor:pointer;}
#hhhhh span{font-size:14px;display:none;clear:both;height:100px;padding:20px 0px 0px 20px;border-top-width:medium;border-top-style:solid;border-top-color:#A0603D;}
</style>
<div onclick="lh()">呵呵地方的方法是十分</div>
<div id="cen_right_top">
<div class="hhhh">
	<h3 class="active">限时抢购</h3>
	<h3>新品尝鲜</h3>
	<h3>茗茶热卖</h3>
	</div>
	<div id="hhhhh">
	<span style="display:block">限时抢购的内容</span>
	<span>新品尝鲜的内容</span>
	<span>茗茶热卖的内容</span>
	</div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
